<md-dialog aria-label="{{ 'ADMINCONSOLE.DIALOG.ADD_DNS_SERVER.TITLE' | translate }}"
           style="max-width: 800px;">

    <form name="vm.dnsServerForm" ng-submit="vm.submit()" novalidate style="overflow: initial;" layout-padding>
        <md-dialog-content layout="column" layout-padding>

            <div>
                <h2 ng-show="vm.update">{{ 'ADMINCONSOLE.DIALOG.ADD_DNS_SERVER.TITLE_EDIT' | translate }}</h2>
                <h2 ng-hide="vm.update">{{ 'ADMINCONSOLE.DIALOG.ADD_DNS_SERVER.TITLE_ADD' | translate }}</h2>
            </div>

            <div layout="column" style="margin-top: 20px;">
                <md-input-container md-theme="eBlockerThemeInput">
                    <label>{{ 'ADMINCONSOLE.DIALOG.ADD_DNS_SERVER.LABEL_ADD_DNS_IPS' | translate }}</label>
                    <input eb-ip-range name="ip" ng-model="vm.entry.server" type="text" md-maxlength="vm.maxLength" required />
                    <div ng-messages="vm.dnsServerForm.ip.$error" ng-if="vm.dnsServerForm.$submitted || vm.dnsServerForm.ip.$touched">
                        <div ng-message="required">{{ 'ADMINCONSOLE.DIALOG.ADD_DNS_SERVER.ERROR.REQUIRED' | translate }}</div>
                        <div ng-message="ipRange">{{ 'ADMINCONSOLE.DIALOG.ADD_DNS_SERVER.ERROR.IPS_INVALID' | translate }}</div>
                        <div ng-message="md-maxlength">{{ 'ADMINCONSOLE.DIALOG.ADD_DNS_SERVER.ERROR.IPS_TOO_LONG' | translate }}</div>
                    </div>
                </md-input-container>

                <div>
                    <md-input-container md-theme="eBlockerThemeInput">
                        <label>{{ 'ADMINCONSOLE.DIALOG.ADD_DNS_SERVER.LABEL_ORDER_NUMBER' | translate }}</label>
                        <input name="order" ng-model="vm.entry.orderNumber" type="number" required />
                        <div ng-messages="vm.dnsServerForm.order.$error" ng-if="vm.dnsServerForm.$submitted || vm.dnsServerForm.order.$touched">
                            <div ng-message="required">{{ 'ADMINCONSOLE.DIALOG.ADD_DNS_SERVER.ERROR.ORDER_REQUIRED' | translate }}</div>
                        </div>
                    </md-input-container>
                </div>
            </div>
        </md-dialog-content>

        <md-dialog-actions layout="row"
                           layout-align="end center"
                           layout-xs="column"
                           layout-align-xs="center center"
                           style="padding-right: 16px;">
            <md-button type="button" ng-click="vm.cancel()" class="md-raised md-secondary">{{ 'ADMINCONSOLE.DIALOG.ADD_DNS_SERVER.ACTION.CANCEL' | translate }}</md-button>
            <md-button type="submit" class="md-raised md-primary md-accent">{{ 'ADMINCONSOLE.DIALOG.ADD_DNS_SERVER.ACTION.OK' | translate }}</md-button>
        </md-dialog-actions>
    </form>
</md-dialog>
